<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车商城首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="styles.css"> &lt;!&ndash; 自定义样式表，可用于添加额外的样式规则 &ndash;&gt;-->
    <style>
        /* 在这里可以添加一些自定义的样式规则，比如设置图片大小、元素间距等 */
        #carOuter img {
            width: 120px;
            height: 150px;
        }

        /* 轮播图样式调整 */
        .carousel-inner img {
            max-width: 100%;
            height: auto;
        }

        /* 搜索框样式 */
        #searchBox {
            width: 300px;
        }
    </style>
</head>

<body>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">汽车商城</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">车型列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">购车指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 搜索框 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <input type="text" class="form-control" id="searchBox" placeholder="搜索汽车品牌、型号...">
            <button type="button" class="btn btn-primary mt-2" id="searchButton">搜索</button>
        </div>
    </div>
</div>

<!-- 轮播图展示热门车型 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-12">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                            class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://example.com/hot-car-1.jpg" class="d-block w-100" alt="热门车型1">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>热门车型1</h5>
                            <p>这是一款备受欢迎的汽车，拥有出色的性能和时尚的外观。</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://example.com/hot-car-2.jpg" class="d-block w-100" alt="热门车型2">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>热门车型2</h5>
                            <p>该车型以其高性价比和舒适的驾乘体验而闻名。</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://example.com/hot-car-3.jpg" class="d-block w-100" alt="热门车型3">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>热门车型3</h5>
                            <p>时尚的设计与强大的动力系统相结合，是这款车的亮点。</p>
                        </div>
                    </div>
                </div>
                <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleIndicators"
                        data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="text-muted">Previous</span>
                </button>
                <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleIndicators"
                        data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="text-muted">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 车辆列表展示 -->
<div class="container mt-3">
    <div class="row" id="carOuter">

    </div>
</div>

<!-- 分页功能 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 筛选功能 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-6">
            <form id="filterForm">
                <label for="brandFilter">选择品牌：</label>
                <select id="brandFilter">
                    <option value="">全部</option>
                    <!-- 这里需要通过JavaScript动态添加汽车品牌选项 -->
                </select>
                <label for="priceFilter">价格区间：</label>
                <select id="priceFilter">
                    <option value="">全部</option>
                    <option value="0-50000">0 - 50,000</option>
                    <option value="50001-100000">50,001 - 100,000</option>
                    <option value="100001-150000">100,001 - 150,001</option>
                    <option value="150001-200000">150,001 - 200,000</option>
                    <option value="200001-">200,001及以上</option>
                </select>
                <input type="submit" value="筛选">
            </form>
        </div>
    </div>
</div>

<!-- 引入必要的JavaScript库 -->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script>
    $(function () {
        let carOuter = document.getElementById("carOuter");
        let str = "";

        // 初始加载车辆列表数据
        loadCarList();

        // 处理搜索框搜索事件
        // 处理搜索框搜索事件
        $('#searchButton').click(function (e) {
            e.preventDefault();
            let searchTerm = $('#searchBox').val();

            // 发送AJAX请求到后端搜索接口
            $.ajax({
                type: "GET",
                url: "/dev/car/search", // 这里的路径要和后端定义的搜索接口路径对应
                data: {
                    keyword: searchTerm
                },

                success: function (response) {
                    // 处理后端返回的搜索结果
                    // 在这里添加代码以打印后端返回数据
                    console.log("后端返回的搜索结果数据：", response);

                    let carOuter = document.getElementById("carOuter");
                    let str = "";
                    if (response && response.data) {
                        response.data.forEach(function (car) {
                            console.log("后端返回的搜索结果数据：", car);
                            console.log("后端返回的搜索结果数据：", car.imagePath);
                            str += `
                            <div class="col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="/dev/img/${car.imagePath}"
                                         alt="通用的占位符缩略图">
                                    <div class="caption">
                                        <h3>${car.brand}</h3>
                                        <p>${car.description}</p>
                                        <p>
                                            <a href="#" class="btn btn-primary" role="button">
                                                查看详情
                                            </a>
                                            <a href="#" class="btn btn-default" role="button">
                                                加入收藏
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        `;
                        });
                        carOuter.innerHTML = str;
                    } else {
                        carOuter.innerHTML = "<p>未找到相关汽车信息。</p>";
                    }
                },
                error: function (xhr, status, error) {
                    console.log("搜索请求出错：", error);
                    carOuter.innerHTML = "<p>搜索请求出错，请稍后重试。</p>";
                }
            });
        });

        // 处理筛选表单提交事件
        $('#filterForm').submit(function (e) {
            e.preventDefault();
            let selectedBrand = $('#brandFilter').val();
            let selectedPriceRange = $('#priceFilter').val();
            loadCarList(null, selectedBrand, selectedPriceRange);
        });

        // 加载车辆列表数据的函数
        function loadCarList(searchTerm = null, brandFilter = null, priceFilter = null) {
            let url = '/dev/car/index';
            if (searchTerm) {
                url += '?search=' + searchTerm;
            }
            if (brandFilter) {
                url += '&brand=' + brandFilter;
            }
            if (priceFilter) {
                url += '&priceRange=' + priceFilter;
            }
            $.get(url, function (res) {
                let arr = res.data;
                str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += `
                            <div class="col-sm-6 col-md-3">
                            <div class="thumbnail">
                                <img src="/dev/img/${arr[i].imagePath}"
                                     alt="通用的占位符缩略图">
                                <div class="caption">
                                    <h3>${arr[i].brand}</h3>
                                    <p>${arr[i].description}</p>
                                    <p>
                                        <a href="#" class="btn btn-primary" role="button">
                                            查看详情
                                        </a>
                                        <a href="#" class="btn btn-default" role="button">
                                            加入收藏
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>

                        `;
                }
                carOuter.innerHTML = str;
            });
        }

        // 初始加载时获取所有汽车品牌并添加到筛选下拉框
        $.get('/dev/car/index', function (res) {
            let arr = res.data;
            let brandSet = new Set();
            for (let i = 0; i < arr.length; i++) {
                brandSet.add(arr[i].brand);
            }
            let brandOptions = Array.from(brandSet).map(brand => `<option value="${brand}">${brand}</option>`);
            $('#brandFilter').html('<option value="">全部</option>' + brandOptions.join(''));
        });
    });
</script>

</body>

</html>